<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>导入会员数据</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<jsp:include page="../inc.jsp"></jsp:include>
	<style type="text/css">
	
		.notsame{
			border: #CCC 1px solid;
			padding: 10px;
		}
		.member{
			display:none;
		}
		.repertory,.member{
			border: #CCC 1px solid;
			padding: 10px;
			margin-top: 20px;
		}
		.repertory{
			display: none;
		}
		.state-box{
			border: #CCC 1px solid;
			padding: 10px;
		}
		
		div{
			margin: 5px;
			line-height: 20px;
		}
		
		
	</style>
  </head>
  
  <body>
   	
   		<form id="form1" action="hygl/memberAction!doImport.html" method="post" enctype="multipart/form-data">
   			
   			<input type="file" name="file" id="file" accept="application/msexcel">
   			<div>
   				<input type="submit" value="导入数据">
   			</div>
   		
   		</form>
   		
   	<div class="state-box">
   	
   		<div>成功条数：${success}</div>
   		<div>失败条数:${fail}</div>
   		
   	</div>
   	
    <script type="text/javascript">
    
    
    $("#form1").submit(function(){
    
		 $.messager.progress({
			text : '数据正在导入中....',
			interval : 1000
		});    	
    	
    });
    

       	var array={
  			${html}     		
		};
    
    //给数组增加移除的方法
    Array.prototype.remove=function(dx)
　	{
	　　if(isNaN(dx)||dx>this.length){return false;}
	　　for(var i=0,n=0;i<this.length;i++)
	　　{
	　　　　if(this[i]!=this[dx])
	　　　　{
	　　　　　　this[n++]=this[i]
	　　　　}
	　　}
	　　this.length-=1
	　}
	
	
	function indexOf(arry,val){
	
		for(var i=0;i<arry.length;i++){
			if(arry[i]==val){
				return i;
			}
		}
		return -1;
	}
	
    //从数组中移除对象
    function removeArray(arry,value){
    	
    	for(var item in arry){
    		var ay=arry[item];
    		for(var i=0;i<ay.length;i++){
    			if(ay[i]==value){
    				//移除
    				ay.remove(i);
    			}
    		}
    		
    	}
    	
    }
    
    
    function substring(str) {
		return str.substring(0, str.length-1);
	}
 

    	
    	
    	$(function(){
    	
    		$("#select1").change(function(){
    			var value=array[$(this).val()];
    			$("#select2").val(value);
    			var html=$(this).val()+":"+getString(array[$(this).val()]);
    			$("#info").text(html);
    			sync();
    		});

    		$("#select2").click(function(){
    			$(this).trigger('change');
        	});
    		
    		$("#select2").change(function(){
    			var value=$("#select1").val();
    			
    			var html=value+":"+getString(array[value]);
    			$("#info").text(html);
    			
    			//array[value]=$(this).val();
    			var bo=find(array[value], $(this).val());
    			if(!bo){
    				
    				try{
    					var le=array[value].length;
    					//先从其他数组移除相关的值
    					removeArray(array, $(this).val());
    					array[value][le+1]=$(this).val();
    				}catch (e) {
						alert(e);
					}
    			}
    			sync();
    		});

    		pageLoad();
    	});
    	
    	//查找数据组是否存在该对象
    	function find(arry,val){
    	
    		for(var i=0;i<arry.length;i++){
    			var v=arry[i];
    			if(v==val){
    				return true;
    			}	
    		}
    		return false;
    	}
    
    	$("#show").click(function(){
    	
    		
    		alert(getValues());
    	});
    	
    	function getString(array){
    		
    		var html="";
    		for(var i=0;i<array.length;i++){
    			if(array[i]!=null){
    				html+=array[i]+",";
    			}
    		}
    		return substring(html);
    	}
    	
    	function getValues(){
    		var code="";
    		for(var item in array){
	    		code+=item+":";
	    		code+=getString(array[item]);
	    		code+="!";
    		}
    		code=substring(code);
    		return code;
    	}
    	//同步
    	function sync(){
    		
    		$("#values").val(getValues());
    	}	


    	function pageLoad(){

    		var me=${showMe};
    		if(me){
				$(".member").show();
        	}

    		if(!me)
        	$(".notsame").hide();
			
       }
        
    </script>
    
   	
   	

<div class="notsame">  
  <form action="" method="post">

	<input type="hidden" name="values" id="values">
    <input type="hidden" name="repertorys" id="repertory">

<!-- 会员  -->
	<div class="member">
	  
		<div>检测到excel表格中的会员类型和数据库中的不符，请手动匹配</div> 	
	    <label>会员类型匹配：</label>
	    <select id="select1">
	    	<s:iterator value="#request.listA" var="i">
	    		<option>${i}</option>
	    	</s:iterator>
	    </select>
	    	<span>对应</span>
	    <select id="select2">
	    	<s:iterator value="#request.listB" var="i">
	    		<option>${i}</option>
	    	</s:iterator>
	    </select>
	    
	    <div>
	    	<label id="info">信息</label>
  	  	</div>
   </div>
  <!-- 会员end  --> 

    <div>
    	<input type="submit" value="完成匹配">
    </div>
    
  </form>  
 </div>   
   	
   	
  </body>
</html>
